<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>在线编译器</title>
</head>
<script src="js/Jquery.js"></script>
<script src="ace/ace.js"></script>
<script src="ace/ext-language_tools.js"></script>
<body>
<!--代码输入框（注意请务必设置高度，否则无法显示）-->
<pre id="code" class="ace_editor" style="min-height:400px"><textarea id="textArea" class="ace_text-input">

 class Test{
        public static void main(String[] args) {
            for(int i=1;i<10;i++)
            System.out.println("sdfsf");
        }
    }
</textarea></pre>
<button type="button" id="button1" value="">提交</button>
<select id="sel" lay-filter="QMID">
    <option value="java" id="java" selected>java</option>
    <option value="python" id="python">python</option>
</select>
<pre  style="min-height:400px"><textarea id="textArea1"  style="resize:none;width: 100%;height: 200px">

</textarea></pre>
<script>
    //初始化对象
    editor = ace.edit("code");

    //设置风格和语言（更多风格和语言，请到github上相应目录查看）
    theme = "clouds"
    language = "java"
    editor.setTheme("ace/theme/"+theme);
    editor.session.setMode("ace/mode/" + language);;

    //字体大小
    editor.setFontSize(18);

    //设置只读（true时只读，用于展示代码）
    editor.setReadOnly(false);

    //自动换行,设置为off关闭
    editor.setOption("wrap", "free")

    //启用提示菜单
    ace.require("ace/language_tools");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    $("#sel").change(function (){
        if($('#sel option:selected').text()=="java"){
            theme = "clouds"
            language = "java"
            editor.setTheme("ace/theme/"+theme);
            editor.session.setMode("ace/mode/" + language);;
        }else {
            theme = "clouds"
            language = "python"
            editor.setTheme("ace/theme/"+theme);
            editor.session.setMode("ace/mode/" + language);;
        }
    })


    $("#button1").click(function (){
        if($("#sel  option:selected").text()!="") {
            console.log(editor.getValue())
            $.ajax({
                type: "POST",
                async: false,
                url: "/CompileServlet",
                data: {"value": editor.getValue(), "type": $("#sel  option:selected").text()},
                success: function (data) {
                    console.log(data)
                    $("#textArea1").val(data);
                }
            })
        }
    });

</script>

</body>
</html>